<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>

<body>
    <div id="box" style="max-width:700px;margin:0 auto;">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>聊天室</h2><span style="color:green;display:none;">(当前在线:<span id="length">0</span>人)</span>
            </div>
            <div class="panel-body" id="body" style="height:400px;overflow-y:auto;">
                <!-- <video src="movie.ogg" width="320" height="240" controls="controls">
                    Your browser does not support the video tag.
                </video> -->
            </div>
        </div>
        <div class="input-group">
            <input type="text" class="form-control" id="in" placeholder="您想说什么?" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2" style="cursor:pointer;">发送</span>
        </div>
    </div>
    <div class="modal fade bs-example-modal-sm" data-backdrop="static" id="model" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" id="name" placeholder="请输入您的昵称" aria-describedby="basic-addon3">
                    <span class="input-group-addon" id="basic-addon3" style="cursor:pointer;">开始聊天</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    window.$ = window.jQuery = require('./jquery.min.js')
    require('./bootstrap.min.js')
    require('./scoket.io.js')

    $(document).ready(function () {
        const ipc = require('electron').ipcRenderer;
        ipc.on('dataJsonPort', function(event, message) { // 监听父页面定义的端口
            //alert(message)
            val = message;
        });
        window.username = 'others';
        var wsServer = 'ws://192.168.3.138:9502';
        var websocket = new WebSocket(wsServer);

        websocket.onopen = function (evt) {
            console.log("Connected to WebSocket server.");
            $("#model").modal('show');
        };


        websocket.onmessage = function (evt) {
            console.log('Retrieved data from server: ' + evt.data);
            $(".panel-body").append(evt.data);
            //$(".panel-body").append('<p><span style="color:#177bbb">'+evt.data.username+'</span> <span style="color:#aaaaaa">('+evt.data.time+')</span>: '+evt.data.msg+'</p>');
            var body = document.getElementById("body");
            body.scrollTop = body.scrollHeight;
            $("#in").focus();

        };


        $("#basic-addon2").click(function () {
            var msg = $("#in").val();
            var Request = new Object();
            websocket.send(msg + "|:|" + val);
            $("#in").val('');
        });

        $("#basic-addon3").click(function () {
            window.username = $("#name").val();
            var Request = new Object();
            websocket.send(window.username + "@:@" + val);
            $("#model").modal('hide');
        });

        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }

    });

</script>

</html>